// 图片单张
import { NInput } from "naive-ui";
import { defineComponent, ref, reactive } from "vue";
import { dxget, prefixS } from "../../util/index";
import mt from "../../assets/img/mt.png";

export default defineComponent({
  emits: ["getImg"],
  props: {
    isfwb: {
      type: Boolean,
      default: false,
    },
    types: {
      type: String,
    },
    accept: {
      type: String,
      default: ".jpg,.png,.jpeg",
    },
    xzval: {
      type: String,
    },
  },
  setup(props, context) {
    let tabsValue = ref("userImg");
    if (props.types) {
      tabsValue.value = props.types;
    }
    let ImgArray: any = ref();
    let xzImg = ref();
    if (props.xzval) {
      xzImg.value = props.xzval;
    }
    const wh = reactive({
      width: 200,
      height: null,
    });
    const tabupdate = (num) => {
      tabsValue.value = num;
      getImgs();
    };
    let upload = reactive({
      typeName: "",
    });
    const loadIngimg = ref(false);
    const getImgs = async () => {
      loadIngimg.value = false;
      let { data }: any = await dxget("public/getImg", {
        Prefix: tabsValue.value,
      });
      upload.typeName = tabsValue.value;
      console.log(data);
      ImgArray.value = data;
    };
    // public/delImg?key=
    const delImg = async (keyVal) => {
      let { errno }: any = await dxget("public/delImg", {
        key: keyVal,
      });
      if (errno == 0) {
        window.$message.success("删除成功！");
        getImgs();
      }
    };
    const checkedRadio = (data) => {
      let okjnse = {}
  
      ImgArray.value.map(a=>{
        if(a.url==data){
          okjnse= a
        }
      })
      // if(data.indexOf(".mp4")>=0){
      //   context.emit("getImg", okjnse);
      //   return
      // }

      if(props.accept=='.mp4'||props.accept=='.mp4,.m4v'){
        context.emit("getImg", okjnse);
        return
      }
      if (props.isfwb) {
        context.emit("getImg", {
          src: data,
          ...wh,
        });
      } else {
        context.emit("getImg", data);
      }
    };

    const getName = (text) => {
      return text.split(props.types + "/")[1];
    };
    getImgs();

    const beforeupload = () => {
      window.socket.emit('parameterUploadProgress')
      loadIngimg.value = true;
    };
    const kijnse = ref(0)
try{
  window.socket.on("jindu", function (data) {
    console.log(data);
    const jindue = JSON.parse(data)
    kijnse.value =parseInt(jindue.percent*100)
})
}catch(e){
  
}
    const errFun = (data) => {
      loadIngimg.value = false;
      window.$message.error("文件不能大于100MB，大于100M请上传视频地址");
    };
    const jhggwer = (item)=>{
      item.imgurl = mt
      console.log('66666');
    }

    return () => (
      <>
        {props.types ? (
          ""
        ) : (
          
          <n-tabs
            type="line"
            v-model:value={tabsValue.value}
            onUpdate:value={tabupdate}
          >
            <n-tab name="userImg">头像2</n-tab>
            <n-tab name="xmgImg">熊猫谷</n-tab>
            <n-tab name="axydImg">安心E点</n-tab>
          </n-tabs>
        )}
        {kijnse.value>0&&kijnse.value<99?(  <n-progress
           type="line"
           percentage={kijnse.value}
           indicator-placement="inside"
           processing
         />):(
         ''
        )}
      
        <div class="photoGallery-img-box">
          {ImgArray.value ? (
            <n-radio-group
              v-model:value={xzImg.value}
              name="radiogroup"
              class="w100"
              onUpdate:value={checkedRadio}
            >
              <n-grid x-gap="10" y-gap="10" cols="6">
                <n-gi>
                  <n-spin show={loadIngimg.value}>
                    <div class="photoGallery-img vertical-center sz">
                      <n-upload
                        action={prefixS + "public/Upimg"}
                        data={upload}
                        onFinish={getImgs}
                        accept={props.accept}
                        on-before-upload={beforeupload}
                        on-error={errFun}
                      >
                        <i class="iconfont dx-tupian fz30"> </i>
                        <p class="z9 fz12">点击上传</p>
                      </n-upload>
                    </div>
                  </n-spin>
                </n-gi>

                {ImgArray.value.map((item,idx) => {
                  if(idx<10){
                  return (
                    <n-gi>
                      <div class="photoGallery-img">
                        <n-radio key={item.key} value={item.url}></n-radio>
                        {(item.url.indexOf(".mp4") > 0||item.url.indexOf(".m4v") > 0) ? (
                          // <img src= {item.imgurl} οnerrοr={()=>jhggwer} />

                          <n-image
                          class="w100 h100 imgjz"
                          onError={()=>jhggwer(item)}
                          src= {item.imgurl}
                        />
                        ) : (
                          <img src={item.url}></img>
                        )}
                        <i
                          class="iconfont dx-shanchu img-icon-error"
                          onClick={() => delImg(item.key)}
                        ></i>

                        {(item.url.indexOf(".mp4") > 0||item.url.indexOf(".m4v") > 0) ? (
                          <div
                            class="photoCaller-pup-video-bg"
                            onClick={() => open(item.url)}
                          >
                            <span class="cf">浏览</span>
                          </div>
                        ) : (
                          ""
                        )}
                      </div>
                      <p class="cen ov pt5 pm5 dian">
                        {item.key.split(props.types + "/")[1]}
                      </p>
                    </n-gi>
                  );
                }
                })}
              </n-grid>
            </n-radio-group>
          ) : (
            ""
          )}
        </div>
        {props.isfwb ? (
          <div class="display-flex">
            <div class="flex-1 pr10">
              <n-input placeholder="宽度：" v-model:value={wh.width} />
            </div>
            <div class="flex-1 pl10">
              <n-input placeholder="高度：" v-model:value={wh.height} />
            </div>
          </div>
        ) : (
          ""
        )}
      </>
    );
  },
});
